<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>render html</title>
  <script src="/vue.js"></script>
</head>
<body>
  <div id="root">
    <!-- 插值表达式 -->
    <!-- {{content}} -->
    <div v-html="content"></div>
    <div v-text="content">abc {{content}}</div>
    <div v-bind:[bindname]="title">title</div>
    <!-- <div UrlString="abc"></div> -->
    <div :title="'abc'"></div>
    <div @click="hanldelClick">click</div>
  </div>
  <script>
    var vm = new Vue({
      el: '#root',
      data: {
        bindname: 'title', //camelCase: bindName, parscalCase: BindName, cebabCase: bind-name
        title: 'hello',
        // XSS
        content: '<h1>this is a title</h1>',
        x: {
          a: {
            aaa: 0
          }
        }
      },
      methods: {
        hanldelClick() {
          console.log('clicked.')
        }
      },
    })

    // var y = 'a'

    // var x = {
    //   [y]: 'aaa'
    // }

    // console.log(x.a)

  </script>
</body>
</html>